<template>
	<view class="bank-detail">
		<view class="bank-item mb30">
			<view class="flex flex-ver">
				<image class="img" :src="userBankInfo.bank_info.icon"></image>
				<view class="mb12 fwb">{{userBankInfo.bank_info.name}}</view>
			</view>

			<view class="fs22 mb4">姓名</view>
			<view class="fs26 mb12">{{userBankInfo.name}}</view>
			<view class="fs22 mb4">卡号</view>
			<view class="fs40">**** **** **** {{userBankInfo.number}}</view>
		</view>

		<view class="unbind bgcfff flex flex-ver flex-sb pl30 pr30 border-r22" @click="unbind">
			<view class="name-color fs28">解绑</view>
			<image :src="backIcon" class="rotate-back-icon"></image>
		</view>

		<confirm-dialog ref="confirm" @confirm="confirm"></confirm-dialog>
	</view>
</template>

<script>

import {deleteUserBank,getUserBankInfo} from '@/api/user/bank'
	import confirmDialog from '../components/confirmDialog.vue';
	export default {
		data() {
			return {
				backIcon:this.$common.imgUrl() + '/back.png',
				userBankInfo:{},
				id:'',
			}
		},
		components: {
			confirmDialog
		},
		async onLoad(query) {
			this.id = query.id;
			await this.getUserBankInfo();
		},
		onShow(){},
		mounted() {},
		methods: {
			async getUserBankInfo(){
        getUserBankInfo({
          id:this.id
        }).then(res=>{
          this.userBankInfo = res.data;
        })
			},
			unbind(){
				this.$refs.confirm.open();
			},
			async confirm(){
        deleteUserBank({
          id:this.id
        }).then(res=>{
          this.$utils.showToast('操作成功');
          setTimeout(() => {
            uni.navigateBack();
          }, 1500)
        })
			},
		}
	}
</script>

<style lang="scss">
	.bank-detail{
		height:100vh;
		padding:20rpx 30rpx;
		background-color: #F5F6FB;
	}
	.img{
		width: 41rpx;
		height: 41rpx;
		margin-right: 14rpx;
	}
	.bank-item{
		width: 100%;
		padding:25rpx 50rpx;
		color:#fff;
		font-size: 32rpx;
		margin-bottom: 14rpx;
		background-color: #C65255;
		border-radius: 7rpx;
	}
	.unbind{
		height:97rpx;
	}
</style>
